import * as React from 'react';
import { Modal,View, Text, TouchableOpacity, useWindowDimensions, StyleSheet, Animated, ScrollView, Image, ViewStyle} from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';
import {scaleSize} from "@/utils/screenSize";
import {Stack, useRouter} from "expo-router";
import AntDesign from "@expo/vector-icons/AntDesign";
import avator from "@/assets/images/me/avator.png";
import {useEffect, useState} from "react";
import empty_fan from "@/assets/images/concern/empty_fan.png"

const fanRoute = () => {
    const [cancelConcern, setCancelConcern] = useState(false);
    const [length, setLength] = useState(10);

    return (
        <View style={[styles.scene, { backgroundColor: '#fff' }]}>
            <ScrollView
                showsVerticalScrollIndicator={false}
            >
                {
                    length > 0 ? (
                        <View style={{ marginTop: 12, }}>
                            <View style={styles.fanContainer}>
                                <View style={styles.fanAvator}>
                                    <Image source={avator} style={{ width: '100%', height: "100%" }}  />
                                </View>
                                <View style={styles.fanName}>
                                    <Text style={styles.fanNameText}>甜蜜老翁</Text>
                                </View>
                                <TouchableOpacity onPress={() => setCancelConcern(true)}>
                                    <View style={styles.fanConcern}>
                                        <Text style={styles.fanConcernText}>已关注</Text>
                                    </View>
                                </TouchableOpacity>
                            </View>
                            <View style={styles.fanContainer}>
                                <View style={styles.fanAvator}>
                                    <Image source={avator} style={{ width: '100%', height: "100%" }}  />
                                </View>
                                <View style={styles.fanName}>
                                    <Text style={styles.fanNameText}>甜蜜老翁</Text>
                                </View>
                                <TouchableOpacity>
                                    <View style={styles.fanConcern}>
                                        <Text style={styles.fanConcernText}>已关注</Text>
                                    </View>
                                </TouchableOpacity>
                            </View>
                            <View style={styles.fanContainer}>
                                <View style={styles.fanAvator}>
                                    <Image source={avator} style={{ width: '100%', height: "100%" }}  />
                                </View>
                                <View style={styles.fanName}>
                                    <Text style={styles.fanNameText}>甜蜜老翁</Text>
                                </View>
                                <TouchableOpacity>
                                    <View style={styles.fanConcern}>
                                        <Text style={styles.fanConcernText}>已关注</Text>
                                    </View>
                                </TouchableOpacity>
                            </View>
                            <View style={styles.fanContainer}>
                                <View style={styles.fanAvator}>
                                    <Image source={avator} style={{ width: '100%', height: "100%" }}  />
                                </View>
                                <View style={styles.fanName}>
                                    <Text style={styles.fanNameText}>甜蜜老翁</Text>
                                </View>
                                <TouchableOpacity>
                                    <View style={styles.fanConcern}>
                                        <Text style={styles.fanConcernText}>已关注</Text>
                                    </View>
                                </TouchableOpacity>
                            </View>
                            <View style={styles.fanContainer}>
                                <View style={styles.fanAvator}>
                                    <Image source={avator} style={{ width: '100%', height: "100%" }}  />
                                </View>
                                <View style={styles.fanName}>
                                    <Text style={styles.fanNameText}>甜蜜老翁</Text>
                                </View>
                                <TouchableOpacity>
                                    <View style={styles.fanConcern}>
                                        <Text style={styles.fanConcernText}>已关注</Text>
                                    </View>
                                </TouchableOpacity>
                            </View>
                            <View style={styles.fanContainer}>
                                <View style={styles.fanAvator}>
                                    <Image source={avator} style={{ width: '100%', height: "100%" }}  />
                                </View>
                                <View style={styles.fanName}>
                                    <Text style={styles.fanNameText}>甜蜜老翁</Text>
                                </View>
                                <TouchableOpacity>
                                    <View style={styles.fanConcern}>
                                        <Text style={styles.fanConcernText}>已关注</Text>
                                    </View>
                                </TouchableOpacity>
                            </View>
                            <View style={styles.fanContainer}>
                                <View style={styles.fanAvator}>
                                    <Image source={avator} style={{ width: '100%', height: "100%" }}  />
                                </View>
                                <View style={styles.fanName}>
                                    <Text style={styles.fanNameText}>甜蜜老翁</Text>
                                </View>
                                <TouchableOpacity>
                                    <View style={styles.fanConcern}>
                                        <Text style={styles.fanConcernText}>已关注</Text>
                                    </View>
                                </TouchableOpacity>
                            </View>
                            <View style={styles.fanContainer}>
                                <View style={styles.fanAvator}>
                                    <Image source={avator} style={{ width: '100%', height: "100%" }}  />
                                </View>
                                <View style={styles.fanName}>
                                    <Text style={styles.fanNameText}>甜蜜老翁</Text>
                                </View>
                                <TouchableOpacity>
                                    <View style={styles.fanConcern}>
                                        <Text style={styles.fanConcernText}>已关注</Text>
                                    </View>
                                </TouchableOpacity>
                            </View>
                            <View style={styles.fanContainer}>
                                <View style={styles.fanAvator}>
                                    <Image source={avator} style={{ width: '100%', height: "100%" }}  />
                                </View>
                                <View style={styles.fanName}>
                                    <Text style={styles.fanNameText}>甜蜜老翁</Text>
                                </View>
                                <TouchableOpacity>
                                    <View style={styles.fanConcern}>
                                        <Text style={styles.fanConcernText}>已关注</Text>
                                    </View>
                                </TouchableOpacity>
                            </View>
                            <View style={styles.fanContainer}>
                                <View style={styles.fanAvator}>
                                    <Image source={avator} style={{ width: '100%', height: "100%" }}  />
                                </View>
                                <View style={styles.fanName}>
                                    <Text style={styles.fanNameText}>甜蜜老翁</Text>
                                </View>
                                <TouchableOpacity>
                                    <View style={styles.fanConcern}>
                                        <Text style={styles.fanConcernText}>已关注</Text>
                                    </View>
                                </TouchableOpacity>
                            </View>
                            <View style={styles.fanContainer}>
                                <View style={styles.fanAvator}>
                                    <Image source={avator} style={{ width: '100%', height: "100%" }}  />
                                </View>
                                <View style={styles.fanName}>
                                    <Text style={styles.fanNameText}>甜蜜老张</Text>
                                </View>
                                <TouchableOpacity>
                                    <View style={styles.fanConcern}>
                                        <Text style={styles.fanConcernText}>已关注</Text>
                                    </View>
                                </TouchableOpacity>
                            </View>
                        </View>
                    ) : (
                        <View style={styles.emptyContainer}>
                            <Image source={empty_fan} style={{ width: "100%", height: "100%" }} />
                            <Text style={[{   transform: [{ translateX: -25 }] }, styles.empty_text]}>暂无关注</Text>
                        </View>
                    )
                }
            </ScrollView>

            <Modal
                animationType="fade"
                transparent={true}
                visible={cancelConcern}
            >
                <TouchableOpacity
                    style={styles.cancelCenteredView}
                    onPress={() => setCancelConcern(false)}
                    activeOpacity={1}
                >
                    <View style={styles.cancelfollowContainer}>
                        <View>
                            <Text style={styles.followTitle}>取消关注</Text>
                        </View>
                        <View>
                            <Text style={styles.followCotent}>确定取消关注?</Text>
                        </View>
                        <View style={styles.footerContainer}>
                            <TouchableOpacity onPress={() => setCancelConcern(false)}>
                                <View style={[styles.footerBtn, styles.footerCancel]}>
                                    <Text style={{ color: "#2A2B30" }}>取消</Text>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => setCancelConcern(false)}>
                                <View style={[styles.footerBtn, styles.footerOk]}>
                                    <Text style={{ color: "#fff" }}>确定</Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                    </View>
                </TouchableOpacity>
            </Modal>
        </View>
    );
};

const fanTowRoute = () => {
    const [cancelConcern, setCancelConcern] = useState(false);
    const [length, setLength] = useState(10);
    const [fan, setFan] = useState(false);

    return (
        <View style={[styles.scene, { backgroundColor: '#fff' }]}>
            <ScrollView
                showsVerticalScrollIndicator={false}
            >
                <View style={{ marginTop: 12, }}>
                    {
                        length > 0 ? (
                            <View style={styles.fanContainer}>
                                <View style={styles.fanAvator}>
                                    <Image source={avator} style={{ width: '100%', height: "100%" }}  />
                                </View>
                                <View style={styles.fanName}>
                                    <Text style={styles.fanNameText}>甜蜜老张</Text>
                                </View>
                                {
                                    fan ? (
                                        <TouchableOpacity onPress={() => setCancelConcern(true)}>
                                            <View style={styles.fanTowConcern}>
                                                <Text style={styles.fanTwoConcernText}>回关</Text>
                                            </View>
                                        </TouchableOpacity>
                                    ) : (
                                        <TouchableOpacity onPress={() => setCancelConcern(true)}>
                                            <View style={styles.fanConcern}>
                                                <Text style={styles.fanConcernText}>互相关注</Text>
                                            </View>
                                        </TouchableOpacity>
                                    )
                                }
                            </View>
                        ) : (
                            <View style={styles.emptyContainer}>
                                <Image source={empty_fan} style={{ width: "100%", height: "100%" }} />
                                <Text style={[{   transform: [{ translateX: -25 }] }, styles.empty_text]}>暂无粉丝</Text>
                            </View>
                        )
                    }
                </View>
            </ScrollView>
        </View>
    );
}

// 自定义的 TabBar 组件
const CustomTabBar = ({ navigationState, position, setIndex }) => {
    // 创建指示器的动态宽度和位置
    const inputRange = navigationState.routes.map((_, i) => i);
    const layoutWith = scaleSize(240);
    const translateX = position.interpolate({
        inputRange,
        outputRange: inputRange.map(i => i * layoutWith / 2 + ((layoutWith / 2) - 26) / 2),
        // outputRange: [48, 162], // 这里的值需要根据实际情况计算
    });


    return (
        <View style={styles.tabHeader}>
            <View style={styles.tabBar}>
                {navigationState.routes.map((route, i) => (
                    <TouchableOpacity
                        key={route.key}
                        onPress={() => setIndex(i)}
                        style={styles.tabItem}>
                        <Text style={{ color: navigationState.index === i ? '#EC6138' : 'black' }}>
                            {route.title}
                        </Text>
                    </TouchableOpacity>
                ))}
                {/* 自定义指示器 */}
                <Animated.View
                    style={[
                        styles.indicator,
                        { transform: [{ translateX }] },
                        { width: scaleSize(26) } // 指示器的宽度
                    ]}
                />
            </View>
        </View>
    );
};

export default function concernView() {
    const layout = useWindowDimensions();

    const [index, setIndex] = React.useState(0);
    const [routes] = React.useState([
        { key: 'first', title: 'TA的关注' },
        { key: 'second', title: 'TA的粉丝' },
    ]);

    const renderScene = SceneMap({
        first: fanRoute,
        second: fanTowRoute,
    });

    const router = useRouter();

    return (
        <>
            <Stack.Screen
                options={{
                    title: 'TA的关注', // 设置屏幕标题
                    headerStyle: {
                        backgroundColor: '#fff', // 设置标题栏的背景颜色
                    },
                    headerShadowVisible: false, // 隐藏底部阴影和边框
                    headerBackTitleVisible: false,
                    headerTintColor: "#333",
                    headerLeft: () => (
                        <TouchableOpacity onPress={() => router.back()}>
                            <AntDesign name="left" size={19} color="#333" />
                            {/*<Ionicons name="arrow-back" size={30} color="#fff" style={{ paddingLeft: 15 }} />*/}
                        </TouchableOpacity>
                    ),
                }}
            />
            <TabView
                navigationState={{ index, routes }}
                renderScene={renderScene}
                onIndexChange={setIndex}
                initialLayout={{ width: layout.width }}
                renderTabBar={(props) => <CustomTabBar {...props} setIndex={setIndex} />} // 使用自定义的 TabBar
            />
        </>
    );
}

const styles = StyleSheet.create({
    scene: {
        flex: 1,
        // justifyContent: 'center',
        // alignItems: 'center',
    },
    tabBar: {
        flexDirection: 'row',
        backgroundColor: 'white',
        position: 'relative', // 需要相对定位来放置指示器
        width:scaleSize(240),
        margin: "auto",
    },
    tabItem: {
        flex: 1,
        alignItems: 'center',
        paddingTop: 10,
        paddingBottom: 9,
        fontSize: 14,
        color: "#2A2B30"
    },
    indicator: {
        position: 'absolute',
        height: 3,
        backgroundColor: '#EC6138',
        bottom: 0,
        borderRadius: 5,
    },
    tabHeader: {
        backgroundColor: "#fff",
        borderBottomWidth: 1,
        borderBottomColor: "#F1F2F5"
    },
    fanContainer: {
        flexDirection: "row",
        marginLeft: 12,
        flex: 1,
        marginRight: 12,
        alignItems: "center",
        marginBottom: 20,
    },
    fanAvator: {
        width: scaleSize(46),
        height: scaleSize(46),
    },
    fanName: {
        flex: 1,
    },
    fanNameText: {
        fontSize: 14,
        color: "#3D3D3D",
        marginLeft: 10,
    },
    fanConcern: {
        width: 56,
        height: 26,
        borderRadius: 13,
        borderWidth: 1,
        borderStyle: "solid",
        borderColor: "#C0C3CE",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
    },
    fanTowConcern: {
        width: 56,
        height: 26,
        borderRadius: 13,
        borderWidth: 1,
        borderStyle: "solid",
        borderColor: "#EC6138",
        backgroundColor: "#EC6138",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
    },
    fanTwoConcernText: {
        color: "#fff",
        fontSize: 12,
    },
    fanConcernText: {
        color: "#C0C3CE",
        fontSize: 11,
    },

    cancelCenteredView: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0,0,0,0.5)',  // 背景遮罩
    },
    cancelfollowContainer: {
        width: 296,
        height: 160,
        backgroundColor: "#fff",
        borderRadius: 8,
        padding: 24,
    },
    followTitle: {
        fontSize: 16,
        color: "#2A2B30",
        fontWeight: 400,
        textAlign: "center"
    },
    followCotent: {
        fontSize: 14,
        color: "#676978",
        textAlign: "center",
        marginTop: 14,
    },
    footerContainer: {
        flexDirection: "row",
        marginTop: 34,
        justifyContent: "space-between"
    },
    footerBtn: {
        width: 114,
        height: 38,
        borderRadius: 19,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
    },
    footerCancel: {
        backgroundColor: "#F7F8F9",
    },
    footerOk: {
        backgroundColor: "#EC6138",
    },
    emptyContainer: {
        marginTop: 98,
        position: "relative",
        width: scaleSize(220),
        height: scaleSize(220),
        margin: "auto",
    },
    empty_text: {
        left: '50%',
        marginTop: 160,
        position: 'absolute',
        color: "#9C9EAC",
        fontSize: 14,
    },
});
